import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Animated,
  Image,
  Easing
} from 'react-native';

const IMG_URI = 'https://s3.amazonaws.com/media-p.slid.es/uploads/alexanderfarennikov/images/1198519/reactjs.png';

export default class AnimationSpringView extends Component {
  constructor(props) {
    super(props);
    //使用 ** Animated.Value** 声明了一个 spinValue 变量，并传了一个 0 作为初始值
     this.spinValue = new Animated.Value(0.3);
  }

  spring () {
       this.spinValue.setValue(0.3);//this.spinValue 重置成 0
       Animated.spring(
              this.spinValue,
         {
             toValue: 1,//终值
             friction : 1,
         }
      ).start();
  }
 
  render () {
      
        return (
            <View style={styles.container}>
              <Text
                style={{marginBottom: 30 , fontSize : 20, fontWeight : 'bold'}}
                //使得 方法spring 绑定 组件 Text 点击该组件时，使nimated.Image弹起并伴有 伸缩效果 从本身大小的0.3-1
                onPress={this.spring.bind(this)}>点击 Spring</Text>
                <Text></Text>
                <Animated.Image
                  style={{ width: 220, height: 200, transform: [{scale: this.spinValue}] }}
                  source={{uri:IMG_URI}}/>
                 <Text></Text>
            </View>
         );
    }
}

const styles = StyleSheet.create({
  container: {
    marginTop: 100,            
    justifyContent: 'center',
    alignItems: 'center',
  }
});





